import { useState } from 'react';
import TextField from '@material-ui/core/TextField';
import './login.css'
import { Button } from '@material-ui/core';
import { sign, login } from '../../api/index';
import Snackbar from '@material-ui/core/Snackbar';
export default function FormPropsTextFields(props) {
    const { match: { path } } = props;
    const [open, setOpen] = useState(false);
    const [message, setMessage] = useState('')
    const signUser = async (e) => {
        const username = document.getElementById('username').value
        const email = document.getElementById('email').value
        const password = document.getElementById('password').value
        if (username && email && password) {
            const { data } = await sign({
                username,
                email,
                password
            })
            const { msg } = data;
            if (msg) {
                setMessage(msg)
                setOpen(true);
                setTimeout(() => {
                    setOpen(false)
                }, 1000);
            } else {
                const { data } = await login({
                    username,
                    email,
                    password
                })
                if (data.token) {
                    localStorage.setItem('token', data.token)
                    props.history.push('/home')
                }

            }
        }

    }
    const loginUser = async () => {
        const username = document.getElementById('username').value
        const password = document.getElementById('password').value
        if (username && password) {
            const { data } = await login({
                username,
                email: username,
                password
            })
            if (data.token) {
                localStorage.setItem('token', data.token)
                props.history.push('/home')
            }
        }
    }
    const isLogin = (path) => {
        switch (path) {
            case '/sign':
                return <div>
                    <TextField
                        id="username"
                        label="用户名"
                        fullWidth
                    />
                    <TextField
                        id="email"
                        label="邮箱"
                        fullWidth
                    />
                    <TextField
                        id="password"
                        label="密码"
                        type="password"
                        autoComplete="current-password"
                        fullWidth
                    />
                    <Button variant="contained" className='width-100 margin_top_20' color='primary' onClick={signUser}>注册</Button>
                </div>
            case '/login':
                return <div>
                    <TextField
                        id="username"
                        label="用户名或者邮箱"
                        fullWidth
                    />
                    <TextField
                        id="password"
                        label="密码"
                        type="password"
                        autoComplete="current-password"
                        fullWidth
                    />
                    <Button variant="contained" className='width-100 margin_top_20' color='primary' onClick={loginUser}>登录</Button>
                </div>
            default:
                return null;
        }
    }
    return <div className='login'>
        <Snackbar open={open} autoHideDuration={6000} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} onClose={() => setOpen(false)}>
            <div style={{ color: 'red' }}>{message}</div>
        </Snackbar>
        {isLogin(path)}

    </div>

}
